import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Drawer, Tab } from '@alifd/next';
import { useStore } from '@/hooks';
import { ENUMS, column, toSelectDataSource } from '../stores/definitions.js';
import { observer } from 'mobx-react-lite';

import DataForm from './DataForm';
import ReceiveDetail from './ReceiveDetail';

const PartnerDrawer = ({ data, modal: show, onCancel, onSubmit, ...formProps }) => {
  const { customerStore: store } = useStore();
  const [modal, setModal] = useState(show);

  useEffect(() => {
    setModal(show);
  }, [show]);

  const TAB_TYPE = [
    { name: t`客户资料`, key: '1', component: <DataForm modal={modal} customer={data} onCancel={onCancel} onSubmit={onSubmit} {...formProps} /> },
    { name: t`服务关联记录`, key: '2', component: <ReceiveDetail data={data} modal={modal} onCancel={onCancel} {...formProps} /> },
  ];

  const TITLE_TEXT = {
    edit: t`编辑客户`,
    view: t`查看客户`,
    customerForm: t`查看客户`,
  };

  useEffect(() => {
    return () => {
      store._tabStatus = '1';
    };
  }, [data]);

  return (
    <Drawer
      visible={modal[0] === 'edit' || modal[0] === 'view' || modal[0] === 'customerForm'}
      title={TITLE_TEXT[modal[0]]}
      style={{ maxWidth: '90%' }}
      closeMode={['esc', 'mask', 'close']}
      onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
      width="100%"
    >
      <Tab
        activeKey={store.tab_Status}
        onChange={(v) => { store.tab_Status = v; }}
      >
        {TAB_TYPE.map((p) => (
          <Tab.Item title={p.name} key={p.key}>
            {p.component}
          </Tab.Item>))}
      </Tab>
    </Drawer>
  );
};

export default observer(PartnerDrawer);
